<script setup>
import { useUserStore } from '@/stores/userStore.js'
import { ref } from 'vue'
const userStore = useUserStore()

const isShow = ref(false)
const isDel = ref(false)
const deleteUser = () => {
  isShow.value = true
  isDel.value = true
}
const changeUser = () => {
  isDel.value = false
  console.log('修改用户')
}
const delUser = (userId) => {
  console.log(userId)
}
</script>
<template>
  <el-table :data="userStore.userInfo" style="width: 100%">
    <el-table-column fixed prop="userId" label="ID" />
    <el-table-column prop="username" label="名称" />
    <el-table-column prop="password" label="密码" />
    <el-table-column prop="userUrl" label="头像" />
    <el-table-column prop="userMoney" label="余额" />
    <el-table-column prop="createTime" label="注册时间" />
    <el-table-column fixed="right" label="操作">
      <template #default>
        <el-button link type="primary" size="small" @click="deleteUser">删除</el-button>
        <el-button link type="primary" size="small" @click="changeUser">修改</el-button>
      </template>
    </el-table-column>
    <el-dialog v-model="isShow" width="500">
      <template #header>
        <h3 v-if="isDel">删除用户</h3>
        <h3 v-else>修改用户</h3>
      </template>
      <template>
        <div v-if="isDel">
          <h3>你是否确认删除</h3>
        </div>
        <div v-else>

        </div>
      </template>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <div v-if="isDel">
          <el-button type="primary" @click="delUser(props.row.userId)">
          确认
          </el-button>
        </div>
        <div v-else>
          <el-button type="primary" @click="isShow = false">
          确认
          </el-button>
        </div>
      </div>
    </template>
    </el-dialog>
  </el-table>
</template>
<style scoped>
#add {
  position: relative;
  left: 92%;
}
</style>
